<template>
  <div>
    <scEcharts :height="height" :option="option"></scEcharts>
  </div>
</template>
<script setup>
import scEcharts from "./../scEcharts/index.vue";
import {onMounted, ref} from "vue";
import http from "@/utils/request";

const option = ref({
  title: {
    text: "",
    subtext: ""
  },
  grid: {
    top: "80px",
  },
  tooltip: {
    trigger: "axis",
  },
  xAxis: {
    type: "category",
    data: [],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [],
      type: "bar",
      barWidth: "15px",
    }
  ],
});

const props = defineProps({
  // 基础类型检查
  // （给出 `null` 和 `undefined` 值则会跳过任何类型检查）
  title: String,
  // 多种可能的类型
  subtext: String,
  model: String,
  dataKey:{
    type: String,
    default: "num"
  },
  labelKey:{
    type: String,
    default: "dayKey"
  },
  height:{
    type: String,
    default: "250px"
  },
  convert: {
    type: Function
  }


})

onMounted(async () => {
  option.value.title.text = props.title
  option.value.title.subtext = props.subtext;

  let param = {};
  param.model = props.model;
  let res = await http.post("/data/list", param);
  if (res.code===200){
    if (props.convert) {
      props.convert(res, option.value);
    }else{
      option.value.series[0].data = res.data.map(item=> item[props.dataKey]);
      option.value.xAxis.data = res.data.map(item=> item[props.labelKey]);
    }

  }


})



</script>
<style scoped>

</style>
